<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin:0; padding:0; }
			div{width:220px; height: 220px; border:4px solid  #ccc; position: relative; float:left; margin:0 10px;}
			div em{width:25px; height: 25px; display: block; background: url(img/tu.gif);
			position: absolute;
			left:10px; bottom:10px;
			z-index: 10;
			}
			div span{ display:none;width:196px; height: 196px; background: rgba(255,255,255,0.7) url(img/logo.gif) no-repeat 10px 10px; border:1px solid deepskyblue; position: absolute; left:-4px; top:-4px; padding:15px;}
			div:hover em{background: url(img/tu2.gif);}
			div:hover span{display: block;}
		</style>
	</head>
	<body>
		<div>
			<img src="img/img01.jpg" alt="" />
			<em></em>
			<span>完蛋了，下课了！！！</span>
		</div>
		<div>
			<img src="img/img02.jpg" alt="" />
			<em></em>
			<span>完蛋了，下课了！！！</span>
		</div>
		<div>
			<img src="img/img03.jpg" alt="" />
			<em></em>
			<span>完蛋了，下课了！！！</span>
		</div>
	</body>
</html>
